<template>
  <el-table :data="nodes" row-key="id" border default-expand-all @sort-change="sortChange">
    <el-table-column prop="id" label="编号" sortable width="100"> </el-table-column>
    <el-table-column prop="name" label="节点名称"> </el-table-column>
    <el-table-column prop="ename" label="节点标识"> </el-table-column>
    <el-table-column label="是否菜单">
      <template slot-scope="{ row }">
        <el-tag v-if="row.meun === '1'" size="medium" type="success">是</el-tag>
        <el-tag v-else size="medium" type="info">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="route" label="路由地址"> </el-table-column>
    <el-table-column label="icon图标">
      <template slot-scope="{ row }">
        <i style="font-size: 18px" :class="[row.icon]"></i>
      </template>
    </el-table-column>
    <el-table-column prop="remark" label="节点备注"> </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="{ row }">
        <el-button type="primary" size="mini" @click="editNode(row.id)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  props: ['nodes', 'loadData'],
  data() {
    return {}
  },
  methods: {
    editNode(nodeid) {
      console.log(nodeid)
    },
    // 点击排序触发事件
    sortChange(column) {
      // ascending / descending => mysql中排序字段 asc / desc
      let { prop = 'id', order = 'descending' } = column
      order = order == 'descending' ? 'desc' : 'asc'
      this.loadData(prop, order)
    }
  }
}
</script>

<style lang="scss" scoped></style>
